<template>
    <div class="login">
        <div class="login-content">
            <div class="title">
                <div class="l-icon">
                    <img src="@/assets/l-icon.png" alt="">
                    <div class="l-con">
                        <span  style="color: #00FFFF; font-size: 20px;font-weight: 800;">用户登录</span>
                        <span style="padding-left: 10px;color: #D4D4D4">Login&nbsp;&nbsp;User</span>
                        <div style="width: 100%;height: 10px;"></div>
                        <div  style="color: rgb(178, 178, 178);" class="l-name">欢迎登录数字万灵供应商平台</div>
                    </div>
                </div>


            </div>
            <el-form :model="formData" label-width="100px">
                <el-form-item label="账号">
                    <el-input class="put" v-model="formData.account" clearable placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input class="put" v-model="formData.password" clearable show-password
                        placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="验证码"  label-width="100px">
                    <el-input class="put" v-model="formData.imagecode" clearable style="width: 150px;"
                        placeholder="请输入验证码"></el-input>
                        <img :src="formData.imagecode1" @click="requestCode" alt="" style="width: 100px;height: 40px;">
                        <!-- <el-button class="btn" type="primary" @click="requestCode">请求验证码</el-button> -->
                </el-form-item>
                <!-- <el-form-item label="captchakey">
                    <el-input class="put" v-model="formData.captchakey" clearable show-password
                        placeholder="请输入captchakey"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button class="btn" type="primary" @click="submitForm">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            formData: {
                account: '',
                password: '',
                imagecode: '',
                captchakey: '',
                imagecode1:''

            }
        }
    },
    methods: {
        submitForm() {
            console.log(this.formData);
            axios.post('/api/user/login', this.formData).then(res => {
                console.log(res);
                if (res.data.code === 0) {
                    let user = res.data.data[0];
                    this.$message({
                        message: "登录成功，即将跳转到首页..",
                        type: "success",
                    });
                    localStorage.setItem("user", JSON.stringify(user));
                    console.log(user);
                    this.$router.push("/home");

                } else {
                    this.$message({
                        message: "输入的账号或密码错误",
                        type: "error",
                    });
                }
            })
        },
        requestCode() {
            axios.get('/api/getVerifyThree').then(res => {
                console.log(res.data.captchaImg);
                this.formData.captchakey = res.data.captchaKey;
                this.formData.imagecode1 = res.data.captchaImg;
            })
        }
    },
    created() {
        this.requestCode();
    }
}
</script>

<style  scoped>
*{
    margin: 0;
    padding: 0;
}
.login {
    width: 100%;
    height: 100vh;
    background: url(@/assets/login.png) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.el-form {
   padding: 0 30px;
}
.el-form-item {
    margin-bottom: 20px;
}
.login-content {
    width: 500px;
    height: 400px;
    background: #fff;
    border-radius: 25px;

}
.l-con{ 
    height: 80px;
    margin-top: 40px;
    padding-left:10px;
    
}

.title {
    width: 100%;
    height: 100px;
    margin-bottom: 50px;
}
.l-icon{
    
    padding: 10px 40px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.l-icon img{
    width: 80px;


}
.l-name{
    font-size: 10px;
    font-weight: 800;
    height: 20px;
}

.put {
    width: 300px;
}

.btn {
    width: 80%;
}
</style>